<template>
  <div class="bg-white p-20px">
    <!-- TODO @fan：style 建议换成 unocss -->
    <!-- TODO @fan：Search 可以换成 Icon 组件么？ -->
    <el-input
      v-model="queryParams.prompt"
      class="!w-full !mb-20px"
      size="large"
      placeholder="请输入要搜索的内容"
      :suffix-icon="Search"
      @keyup.enter="handleQuery"
    />
    <div v-if="list.length" class="flex flex-col">
      <div class="grid grid-cols-[repeat(auto-fill,minmax(200px,1fr))] gap-10px">
        <!-- TODO @fan：这个图片的风格，要不和 ImageCard.vue 界面一致？（只有卡片，没有操作）；因为看着更有相框的感觉~~~ -->
        <div
          v-for="item in list"
          :key="item.id"
          class="relative overflow-hidden cursor-pointer transition-transform duration-300 hover:scale-105"
        >
          <el-image
            v-if="item?.picUrl"
            class="!rounded-10px"
            :src="item?.picUrl"
            :preview-src-list="[item.picUrl]"
            preview-teleported
          />
          <!-- <img
          :src="item.picUrl"
          class="w-full h-auto block transition-transform duration-300 hover:scale-110"
        /> -->
        </div>
      </div>
      <!-- TODO @fan：缺少翻页 -->
      <!-- 分页 -->
      <div class="float-right">
        <Pagination
          :total="total"
          v-model:page="queryParams.pageNo"
          v-model:limit="queryParams.pageSize"
          @pagination="getList"
        />
      </div>
    </div>
    <el-empty v-else description="无数据" />
  </div>
</template>
<script setup lang="ts">
import { ImageApi, ImageVO } from '@/api/ai/image'
import { Search } from '@element-plus/icons-vue'

// TODO @fan：加个 loading 加载中的状态
const loading = ref(true) // 列表的加载中
const list = ref<ImageVO[]>([]) // 列表的数据
const total = ref(0) // 列表的总页数
const queryParams = reactive({
  pageNo: 1,
  pageSize: 20,
  publicStatus: true,
  prompt: undefined
})

/** 查询列表 */
const getList = async () => {
  loading.value = true
  try {
    const data = await ImageApi.getImagePageMy(queryParams)
    list.value = data.list
    total.value = data.total
  } finally {
    loading.value = false
  }
}

/** 搜索按钮操作 */
const handleQuery = () => {
  queryParams.pageNo = 1
  getList()
}

/** 初始化 */
onMounted(async () => {
  await getList()
})
</script>
